<template>
    <div>
      <title-bar :title="titleText"/>
    <scroller>
    <refresh class="loading" @refresh="onRefresh" :display="refreshState ? 'show' : 'hide'">
      <text>{{refreshText}}</text>
    </refresh>
      <div class="wrapper" v-for="num in lists">
          <div class="panel">
            <text class="text">{{num}}</text>
          </div>
      </div>
      <loading class="loading" @loading='onLoading' :display="loadinging ? 'show' : 'hide'">
          <text>{{logdingText}}</text>
          
      </loading>
    </scroller>
    </div>
</template>
<script>
import TitleBar from "../components/TitleBar";
export default {
  components: {
    TitleBar
  },
  data: {
    titleText: "Loading和Refresh标签",
    loadinging: false,
    refreshState: false,
    lists: ["1", "2", "3", "4", "5", "6"],
    logdingText: "Logding...",
    refreshText: "Refresh..."
  },
  methods: {
    onLoading: function(event) {
      let self = this;
      self.loadinging = true;
      setTimeout(() => {
        self.loadinging = false;
      }, 2000);
    },
    onRefresh(event) {
      let self = this;
      self.refreshState = true;
      setTimeout(() => {
        self.refreshState = false;
      }, 500);
    }
  }
};
</script>
<style scoped>
.text {
  font-size: 50px;
  text-align: center;
  color: #41b883;
}
.panel {
  width: 600px;
  height: 250px;
  flex-direction: column;
  justify-content: center;
  margin-top: 35px;
  margin-bottom: 35px;
  border-width: 2px;
  border-color: #41b883;
  background-color: #f5f5f5;
  border-radius: 10px;
}
.wrapper {
  justify-content: center;
  align-items: center;
}

.loading {
  width: 750;
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
}
</style>


